<template>
  <div class="box">
    <div class="header">
      <div class="area" :class="{ 'disabled-area': !picArr.length || !currentPic }" @click="handleTop">
        <i class="el-icon-arrow-left"></i>
        <span>上一张</span>
      </div>
      <div class="area" :class="{ 'disabled-area': !picArr.length || currentPic === picArr.length - 1 }"
        @click="handleBottom">
        <span>下一张</span>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="area area-left">
        <img src="../../assets/images/editImg/color.png" alt="" class="mini-right">
        <span class="area-right">颜色</span>
        <el-color-picker v-model="color1"></el-color-picker>
      </div>
      <div class="area area-right3">
        <i class="el-icon-edit mini-right"></i>
        <span class="area-right2">粗细</span>
        <el-slider v-model="value1" :min="1" :max="10"></el-slider>
      </div>

      <div class="way">
        <div class="way-box" v-for="item in arr" :key="item.value" :class="{ 'current-way': currentWay === item.value }"
          @click="handleClick(item)">
          <template v-if="item.value === 'pen'">
            <img src="../../assets/images/editImg/pen.png" alt="" class="mini-right">
            {{ item.label }}
          </template>
          <template v-else-if="item.value === 'line'">
            <img src="../../assets/images/editImg/line.png" alt="" class="mini-right">
            {{ item.label }}
          </template>
          <template v-else-if="item.value === 'circle'">
            <img src="../../assets/images/editImg/circle.png" alt="" class="mini-right">
            {{ item.label }}
          </template>
          <template v-else-if="item.value === 'rect'">
            <img src="../../assets/images/editImg/rect.png" alt="" class="mini-right">
            {{ item.label }}
          </template>
          <template v-else-if="item.value === 'eraser'">
            <img src="../../assets/images/editImg/eraser.png" alt="" class="mini-right">
            {{ item.label }}
          </template>
          <template v-else-if="item.value === 'word'">
            <img src="../../assets/images/editImg/word.png" alt="" class="mini-right">
            {{ item.label }}
          </template>
          <template v-else>
            <i :class="item.class" class="mini-right"></i>
            {{ item.label }}
          </template>
        </div>
      </div>

      <div class="area area-left" @click="handleBig">
        <i class="el-icon-zoom-in mini-right"></i>
        <span>放大</span>
      </div>
      <div class="area area-right3" @click="handleSmall">
        <i class="el-icon-zoom-in mini-right"></i>
        <span>缩小</span>
      </div>

      <!--      <div class="area" @click="handleTurnLeft" :class="{ 'disabled-area': !!rotateFlag }">-->
      <!--        <i class="el-icon-refresh-left mini-right"></i>-->
      <!--        <span>左旋转</span>-->
      <!--      </div>-->
      <!--      <div class="area area-right3" @click="handleTurnRight" :class="{ 'disabled-area': !!rotateFlag }">-->
      <!--        <i class="el-icon-refresh-right mini-right"></i>-->
      <!--        <span>右旋转</span>-->
      <!--      </div>-->

      <div class="area" @click="handlePre" :class="{ 'disabled-area': !!isPreDisabled }">
        <i class="el-icon-top-left mini-right"></i>
        <span>上一步</span>
      </div>
      <div class="area area-right3" @click="handleNext" :class="{ 'disabled-area': !!isDisabled }">
        <i class="el-icon-top-right mini-right"></i>
        <span>下一步</span>
      </div>

      <div class="area" @click="handleClear">
        <i class="el-icon-circle-close mini-right"></i>
        <span>清除</span>
      </div>
      <div class="area" @click="handleRemove">
        <i class="el-icon-delete mini-right"></i>
        <span>删除</span>
      </div>
      <div class="area" @click="handleDownload">
        <i class="el-icon-download mini-right"></i>
        <span>下载</span>
      </div>
      <div class="area" @click="handleOver">
        <i class="el-icon-copy-document mini-right"></i>
        <span>覆盖</span>
      </div>

    </div>
    <div class="body">
      <div class="left">
        <div class="left-item" v-for="(item, index) in picArr" :key="index"
          :class="{ 'current-pic': currentPic === index }" @click="handleClickLeft(item, index)">
          <div>
            <img :src="item.fullUrl" alt="">
          </div>
          <div>{{ item.originFileName }}</div>
        </div>
      </div>
      <div class="right">
        <!--        <img :src="src" alt="" id="defaultImg">-->
        <canvas id="canvas" :width="width" :height="height"></canvas>
        <canvas id="canvas2" :width="width" :height="height"></canvas>
        <canvas id="canvas3" :width="width" :height="height"></canvas>

        <input type="text" v-model="inputValue" autocomplete="off" @keyup.enter="handleEnter" id="inputNm" />
      </div>
    </div>
  </div>
</template>

<script>
  import { getDetail, removePic, uploadPic } from '@/api/medicalSicknessManage'
  export default {
    data() {
      return {
        inputValue: '',
        canvasObj: {},
        canvas: null,
        canvasObj2: {},
        canvas2: null,
        drawData: [],
        fullData: [],
        bgData: [], //初始的背景图
        nowData: [],
        s: 'pen',
        color1: '#f00',
        value1: 1,
        currentWay: 'pen',
        count: 0,
        redoFlag: false,
        isPreDisabled: true,
        isDisabled: true,
        width: 1000,
        height: 600,
        picArr: [],
        currentPic: 0,
        currentUrl: '',
        currentName: '',
        currentId: '',
        currentPath: '',
        ox: 0,
        oy: 0,
        rotateCount: 0,
        rotateDeg: 0,
        rotateFlag: false,
        src: '',
        arr: [
          {
            label: '画笔',
            value: 'pen',
            class: 'el-icon-edit'
          }, {
            label: '直线',
            value: 'line'
          }, {
            label: '圆形',
            value: 'circle',
            class: 'el-icon-chat-round'
          }, {
            label: '矩形',
            value: 'rect',
            class: 'el-icon-chat-square'
          }, {
            label: '橡皮',
            value: 'eraser'
          }, {
            label: '文字',
            value: 'word'
          }
        ],
        canvasStore: [],
        currentImgUrl: ''
      }
    },
    mounted() {
      this.id = this.$route.query.id
      this.getInfo(this.id)
    },
    methods: {
      handleEnter() {
        if (this.inputValue) {
          this.canvasObj.font = '14px Avenir, Helvetica, Arial, sans-serif'
          this.canvasObj.fillStyle = this.color1
          this.canvasObj.fillText(this.inputValue, this.ox, this.oy + 22)
          document.getElementById('inputNm').style.display = 'none'
          this.inputValue = ''
          this.handleSaveItem()
        }
      },
      getInfo(id, val) {
        this.picArr = []
        getDetail(id).then(res => {
          if (res.code === 200) {
            let d = res.data.busFiles
            let arr = (d && d.length) ? d : []
            this.picArr = arr.map(v => {
              return {
                ...v,
                // fullUrl: `http://106.53.71.55:8999${v.url}`
                fullUrl:`/api${v.url}` 
                // fullUrl: `${v.url}`
              }
            })

            if (this.picArr.length) {
              if (val) {
                this.currentUrl = this.picArr[this.currentPic].fullUrl
                this.currentName = this.picArr[this.currentPic].originFileName
                this.currentId = this.picArr[this.currentPic].id
                this.currentPath = this.picArr[this.currentPic].path
              } else {
                this.currentUrl = this.picArr[0].fullUrl
                this.currentName = this.picArr[0].originFileName
                this.currentId = this.picArr[0].id
                this.currentPath = this.picArr[0].path
              }

              let images = new Image()
              images.src = this.currentUrl
              images.class = 're-images'
              images.onload = () => {
                let wl = images.width.toString()
                let hl = images.height.toString()
                console.log(wl);
                console.log(hl);
                this.width = wl
                this.height = hl
                this.init()
              }

            }

          }
        })
      },
      handleTop() {
        if (!this.picArr.length || !this.currentPic) {
          return
        }
        this.currentPic -= 1
        this.currentUrl = this.picArr[this.currentPic].fullUrl
        this.currentName = this.picArr[this.currentPic].originFileName
        this.currentId = this.picArr[this.currentPic].id
        this.currentPath = this.picArr[this.currentPic].path

        let images = new Image()
        images.src = this.currentUrl
        images.class = 're-images'
        images.onload = () => {
          let wl = images.width.toString()
          let hl = images.height.toString()
          console.log(wl);
          this.width = wl
          this.height = hl
          this.handleClear()
        }
      },
      handleBottom() {
        if (!this.picArr.length || this.currentPic === this.picArr.length - 1) {
          return
        }
        this.currentPic += 1
        this.currentUrl = this.picArr[this.currentPic].fullUrl
        this.currentName = this.picArr[this.currentPic].originFileName
        this.currentId = this.picArr[this.currentPic].id
        this.currentPath = this.picArr[this.currentPic].path

        let images = new Image()
        images.src = this.currentUrl
        images.class = 're-images'
        images.onload = () => {
          let wl = images.width.toString()
          let hl = images.height.toString()
          this.width = wl
          this.height = hl
          this.handleClear()
        }
      },
      handleClickLeft(item, index) {
        this.currentPic = index
        this.currentUrl = this.picArr[this.currentPic].fullUrl
        this.currentName = this.picArr[this.currentPic].originFileName
        this.currentId = this.picArr[this.currentPic].id
        this.currentPath = this.picArr[this.currentPic].path

        this.rotateCount = 0

        let images = new Image()
        images.src = this.currentUrl
        images.class = 're-images'
        images.onload = () => {
          let wl = images.width.toString()
          let hl = images.height.toString()
          console.log(wl);
          this.width = wl
          this.height = hl
          this.handleClear()
        }

      },
      handleClick(item) {
        this.currentWay = item.value
        if (item.value === 'eraser') {
          this.canvas.style.cursor = `url("eraser.png"), auto`
        } else if (item.value === 'word') {
          this.canvas.style.cursor = `url("word.png"), auto`
        } else {
          this.canvas.style.cursor = `default`
        }
        document.getElementById('inputNm').style.display = 'none'
        this.inputValue = ''
      },
      handleBig() {
        this.width = this.width * 1.2
        this.height = this.height * 1.2
        this.handleDrawSize()
      },
      handleSmall() {
        // this.width = this.width -= 100
        // this.height = this.height -= 100
        this.width = this.width * 0.8
        this.height = this.height * 0.8
        this.handleDrawSize()
      },
      handleTurnLeft() {
        this.canvasObj2.clearRect(0, 0, this.width, this.height)
        let ia = new Image()
        ia.src = this.currentUrl
        ia.onload = () => {
          let w = ia.width
          let h = ia.height
          this.rotateCount -= 1
          let num = Math.abs(this.rotateCount) % 4
          console.log('余数')
          console.log(num)
          if (num === 0) {
            this.width = w
            this.height = h
          } else if (num === 1) {
            this.width = h
            this.height = w
          } else if (num === 2) {
            this.width = w
            this.height = h
          } else if (num === 3) {
            this.width = h
            this.height = w
          }

          setTimeout(() => {
            console.log('步数', this.rotateCount)
            // let du = num ? num * -Math.PI / 2 : 2 * -Math.PI
            this.rotateDeg = this.rotateCount * Math.PI / 2
            console.log(this.rotateDeg)
            if (this.rotateCount < 0) {
              if (num === 0) {
                this.canvasObj2.translate(0, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 1) {
                this.canvasObj2.translate(0, w)
                // this.canvasObj2.translate(h, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              } else if (num === 2) {
                this.canvasObj2.translate(w, h)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 3) {
                this.canvasObj2.translate(h, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              }
            } else {
              if (num === 0) {
                this.canvasObj2.translate(0, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 1) {
                // this.canvasObj2.translate(0, w)
                this.canvasObj2.translate(h, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              } else if (num === 2) {
                this.canvasObj2.translate(w, h)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 3) {
                // this.canvasObj2.translate(h, 0)
                this.canvasObj2.translate(0, w)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              }
            }
          }, 10)
        }
      },
      handleTurnRight() {
        this.canvasObj2.clearRect(0, 0, this.width, this.height)
        let ia = new Image()
        ia.src = this.currentUrl
        ia.onload = () => {
          let w = ia.width
          let h = ia.height
          this.rotateCount += 1
          let num = Math.abs(this.rotateCount) % 4
          console.log(this.rotateCount);
          console.log('余数')
          console.log(num)
          if (num === 0) {
            this.width = w
            this.height = h
          } else if (num === 1) {
            this.width = h
            this.height = w
          } else if (num === 2) {
            this.width = w
            this.height = h
          } else if (num === 3) {
            this.width = h
            this.height = w
          }

          setTimeout(() => {
            console.log('步数', this.rotateCount)
            this.rotateDeg = this.rotateCount * Math.PI / 2
            // let du = Math.PI / 2
            console.log(this.rotateDeg)
            if (this.rotateCount < 0) {
              if (num === 0) {
                this.canvasObj2.translate(0, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 1) {
                // this.canvasObj2.translate(h, 0)
                this.canvasObj2.translate(0, w)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              } else if (num === 2) {
                this.canvasObj2.translate(w, h)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 3) {
                // this.canvasObj2.translate(0, w)
                this.canvasObj2.translate(h, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              }
            } else {
              if (num === 0) {
                this.canvasObj2.translate(0, 0)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 1) {
                this.canvasObj2.translate(h, 0)
                // this.canvasObj2.rotate(Math.PI / 2)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              } else if (num === 2) {
                this.canvasObj2.translate(w, h)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.width, this.height)
              } else if (num === 3) {
                this.canvasObj2.translate(0, w)
                this.canvasObj2.rotate(this.rotateDeg)
                this.canvasObj2.drawImage(ia, 0, 0, this.height, this.width)
              }
            }
          }, 10)
        }
      },
      handleDrawSize() {
        let img = new Image()
        img.crossOrigin = ''
        img.src = this.currentUrl
        img.onload = () => {
          this.canvasObj.clearRect(0, 0, this.width, this.height)
          this.canvasObj3.drawImage(img, 0, 0, this.width, this.height)
        }

        let img2 = new Image()
        img2.src = this.currentImgUrl
        img2.onload = () => {
          this.canvasObj2.drawImage(img2, 0, 0, this.width, this.height)
        }
      },
      handlePre() {
        if (this.isPreDisabled) return
        this.isDisabled = false
        this.count += 1

        if (this.canvasStore.length - this.count <= 1) {
          this.isPreDisabled = true
          this.currentImgUrl = this.canvasStore[0]
          this.handleDrawSize()
          return
        }
        let nowData = this.canvasStore.slice(0, this.canvasStore.length - this.count)
        this.currentImgUrl = nowData[nowData.length - 1]
        this.handleDrawSize()
      },
      handleNext() {
        if (this.isDisabled) return
        this.isPreDisabled = false
        if (this.count) {
          let nowData = this.canvasStore.slice(this.canvasStore.length - this.count, this.canvasStore.length)
          this.currentImgUrl = nowData[0]
          this.handleDrawSize()
          this.count -= 1
          if (this.count === 0) this.isDisabled = true
        } else {
          this.isDisabled = true
        }
      },
      handleClear() {
        this.isDisabled = true
        this.isPreDisabled = true
        this.canvasStore = []
        this.currentImgUrl = ''
        this.handleInit()
      },
      handleRemove() {
        this.$confirm('确认删除该图片吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removePic(this.currentId).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.currentPic = 0
              this.currentUrl = ''
              this.currentName = ''
              this.currentId = ''
              this.currentPath = ''
              this.s = 'pen'
              this.color1 = '#f00'
              this.value1 = 1
              this.currentWay = 'pen'
              this.count = 0
              this.canvasStore = []
              this.currentImgUrl = ''
              this.isDisabled = true
              this.isPreDisabled = true
              this.getInfo(this.id)
            }
          })
        }).catch(() => { })
      },
      handleDownload() {
        const loading = this.$loading({
          lock: true,
          text: '文件正在下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.$message.success('下载完成')
        let dataURL = this.canvas2.toDataURL('image/png')
        let link = document.createElement('a')
        link.href = dataURL
        // link.download = Date.now() + '.png'
        link.download = this.currentName
        link.click()
        loading.close()

        // let bgImage = new Image()
        // bgImage.crossOrigin = ''
        // bgImage.src = this.currentUrl
        // bgImage.onload = () => {
        //   loading.close()
        //   this.$message.success('下载完成')
        //   let dataURL = this.canvas.toDataURL('image/png')
        //   let link = document.createElement('a')
        //   link.href = dataURL
        //   link.download = Date.now() + '.png'
        //   link.click()
        // }
      },
      handleOver() {
        let dataURL = this.canvas2.toDataURL('image/png')
        let arr = dataURL.split(','),
          bStr = atob(arr[1]),
          n = bStr.length,
          u8Arr = new Uint8Array(n)
        while (n--) {
          u8Arr[n] = bStr.charCodeAt(n)
        }
        let file = new File([u8Arr], this.currentName, { type: 'image/png' })
        let formData = new FormData()
        formData.append('file', file)
        uploadPic(formData, this.currentPath).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getInfo(this.id, 'none')
          }
        })
      },
      handleInit() {
        let bgImage = new Image()
        bgImage.crossOrigin = ''
        bgImage.src = this.currentUrl
        bgImage.onload = () => {
          this.canvasObj.clearRect(0, 0, this.width, this.height)
          this.canvasObj2.drawImage(bgImage, 0, 0, this.width, this.height)
          this.canvasObj3.drawImage(bgImage, 0, 0, this.width, this.height)

          let a = this.canvas2.toDataURL()
          this.canvasStore.push(a)
        }
      },
      handleSaveItem() {
        let url = this.canvas.toDataURL()
        let image = new Image()
        image.src = url
        image.onload = () => {
          this.canvasObj.clearRect(0, 0, this.width, this.height)
          this.canvasObj2.drawImage(image, 0, 0, this.width, this.height)

          let url2 = this.canvas2.toDataURL()
          this.currentImgUrl = url2
          this.canvasStore.push(url2)
        }



        // let dataURL = this.canvas.toDataURL()
        // this.currentImgUrl = dataURL
        // this.canvasStore.push(dataURL)
        // let image = new Image()
        // image.src = this.currentImgUrl
        // image.onload = () => {
        //   console.log('完成')
        //   this.canvasObj.clearRect(0, 0, this.width, this.height)
        //   this.canvasObj.drawImage(image, 0, 0, this.width, this.height)
        //   this.src = this.currentImgUrl
        // }
      },
      init() {
        this.canvas = document.getElementById("canvas")
        this.canvasObj = this.canvas.getContext("2d")
        this.canvas2 = document.getElementById("canvas2")
        this.canvasObj2 = this.canvas2.getContext("2d")
        this.canvas3 = document.getElementById("canvas3")
        this.canvasObj3 = this.canvas3.getContext("2d")
        this.canvas.style.cursor = `default`

        this.handleInit()

        this.canvas.onmousedown = (e) => {   //canvas上按下鼠标事件
          let ox = e.offsetX;
          let oy = e.offsetY;
          let draw = new Draw(this.canvasObj, this.canvasObj3, {
            color: this.color1,
            width: this.value1,
            style: 'stroke'
          })
          this.canvasObj.moveTo(ox, oy);
          if (this.currentWay === 'word') {
            document.getElementById('inputNm').style.display = 'block'
            document.getElementById('inputNm').focus()
            document.getElementById('inputNm').style.left = ox + 'px'
            document.getElementById('inputNm').style.top = oy + 'px'
            document.getElementById('inputNm').style.borderColor = this.color1
            document.getElementById('inputNm').style.color = this.color1

            this.ox = ox
            this.oy = oy
          }
          if (this.currentWay === "pen") {
            this.canvasObj.beginPath()
            this.canvasObj.moveTo(ox, oy)
          }
          this.redoFlag = false
          this.isPreDisabled = false
          this.rotateFlag = true

          this.canvas.onmousemove = (e) => {     //移动事件
            let mx = e.offsetX;
            let my = e.offsetY;
            if (this.currentWay !== "eraser") {
              this.canvasObj.clearRect(0, 0, this.width, this.height);
            }
            draw[this.currentWay](ox, oy, mx, my);
          };
          document.onmouseup = () => {
            this.handleSaveItem()
            this.canvas.onmousemove = null;
            document.onmouseup = null;
          }
        }

        class Draw {
          constructor(canvasObj, canvasObj3, option) {
            this.canvasObj = canvasObj;
            this.canvasObj3 = canvasObj3;
            this.color = option.color;
            this.width = option.width;
            this.style = option.style;
          }

          init() { //初始化
            this.canvasObj.strokeStyle = this.color;
            this.canvasObj.fillStyle = this.color;
            this.canvasObj.lineWidth = this.width;
          }

          rect(ox, oy, mx, my) {
            this.init();
            this.canvasObj.beginPath();
            this.canvasObj.rect(ox, oy, mx - ox, my - oy);
            // this.canvasObj[this.style]();
            this.canvasObj.stroke();
          }

          line(ox, oy, mx, my) {
            this.init();
            this.canvasObj.beginPath();
            this.canvasObj.moveTo(ox, oy);
            this.canvasObj.lineTo(mx, my);
            this.canvasObj.stroke();
          }

          circle(ox, oy, mx, my) { //圆
            this.init();
            this.canvasObj.moveTo(mx, my);
            this.canvasObj.beginPath();
            let r = Math.sqrt(Math.pow(mx - ox, 2) + Math.pow(my - oy, 2));
            this.canvasObj.arc(ox, oy, r, 0, 2 * Math.PI);
            // this.canvasObj[this.style]();
            this.canvasObj.stroke()
          }

          pen(ox, oy, mx, my) {
            this.init();
            this.canvasObj.lineTo(mx, my);
            this.canvasObj.stroke();
          }

          eraser(ox, oy, mx, my) {
            console.log(this.canvasObj3)
            let pxs = this.canvasObj3.getImageData(mx, my, 20, 20);
            this.canvasObj.putImageData(pxs, mx, my);
          }

          word() {

          }
        }


      }

    }
  }
</script>
<style lang="scss">
  .box {
    // height: 100%;
    height: 1000px;
    overflow: auto;
    font-size: 12px;
    background: #F6F8FA;
  }

  .header {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #F6F8FA;
    border: 1px solid #eee;
  }

  .area {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    padding: 0 5px;
    margin-right: 5px;
    cursor: pointer;
  }

  .el-color-picker {
    width: 20px;
    height: 20px !important;
  }

  .el-color-picker .el-color-picker__trigger {
    width: 20px;
    height: 20px !important;
  }

  .area>span {
    white-space: nowrap;
  }

  .mini-left {
    margin-left: 4px;
  }

  .mini-right {
    margin-right: 4px;
  }

  .area-left {
    margin-left: 20px;
  }

  .area-right {
    margin-right: 10px;
  }

  .area-right2 {
    margin-right: 15px;
  }

  .area-right3 {
    margin-right: 20px;
  }

  .way {
    display: flex;
  }

  .disabled-area {
    background: #ccc;
    cursor: not-allowed;
  }

  .way-box {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    letter-spacing: 1px;
    border: 1px solid #ccc;
    padding: 0 5px;
    margin-right: 5px;
    cursor: pointer;
  }

  .way-box img {
    width: 12px;
    height: 12px;
  }

  .way .way-box:not(:last-child) {
    margin-right: 5px;
  }

  .current-way {
    border-bottom: 3px solid #409EFF;
  }

  #canvas,
  #canvas2,
  #canvas3 {
    position: absolute;
    left: 0;
    top: 0;
  }

  #canvas {
    z-index: 5;
  }

  #canvas2 {
    z-index: 3;
  }

  #canvas3 {
    z-index: 1;
  }

  .el-slider {
    width: 100px;
  }

  .body {
    height: calc(100% - 60px);
    padding: 10px;
    background: #F6F8FA;
    display: flex;
  }

  .left {
    width: 200px;
    height: 100%;
    margin-right: 10px;
    background: #fff;
  }

  .left-item {
    height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .current-pic {
    background: #EBF5FF;
    color: #409EFF;
  }

  .left-item div:first-child {
    height: 24px;
    width: 24px;
    margin-right: 10px;
  }

  .left-item div:first-child img {
    width: 100%;
    height: 100%;
  }

  .right {
    width: calc(100% - 200px);
    height: 100%;
    position: relative;
  }

  .right #canvas,
  .right #canvas2,
  .right #canvas3 {
    border: 1px solid #ccc;
    /* //cursor: url("../../assets/images/editImg/circle.png"), auto; */
  }


  #inputNm {
    position: absolute;
    display: none;
    height: 28px;
    outline: none;
    background: none;
  }
</style>